<template>
  <Crad :header-border="true" padding="0" header-class="p-0">
    <template #title>
      <view class="disFlxJS py-13 px-16">
        <view class="disFlxAC gap-4">
          <TImage
            error-img-type="person"
            :src="data.avatar"
            width="48rpx"
            height="48rpx"
            border-radius="50%"
          ></TImage>
          <view class="fz-14 linh-20 font-bold">
            <text>{{ data.userName }}</text>
            <text>·</text>
            <text>{{ data.companyPosition }}</text>
          </view>
        </view>
        <CustomTag
          :text="reviewStatusText.text"
          :background-color="reviewStatusText.bgColor"
          color="#FFF"
          padding="8rpx 16rpx"
          font-size="24rpx"
          line-height="32rpx"
        ></CustomTag>
      </view>
    </template>
    <template #default>
      <view class="px-12 pb-12">
        <view class="fz-14 linh-20 mb-12" style="color: #646566">
          申请时间：{{ data.createTime }}
        </view>
        <view
          class="fz-14 linh-20 mb-12"
          style="color: #646566"
          v-if="data.reviewStatus === ReviewStatus.Rejected"
        >
          驳回原因：{{ data.reviewContent || '无' }}
        </view>
        <view
          class="disFlxAC p-12 br-8"
          style="background-color: #d0f7ff"
          @click="toSupplyDemandDetails"
        >
          <TImage
            width="40rpx"
            height="40rpx"
            :src="`https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/${
              data.boType === BoTypeEnum.Demand ? 'xu.png' : 'gong.png'
            }`"
          />
          <text class="ml-4 mr-10 fz-14 linh-20 ov-1 flex-1 font-bold">
            {{ data.title }}
          </text>
        </view>
      </view>
    </template>
  </Crad>
</template>
<script setup lang="ts">
  import Crad from '@/components/Crad/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import type { ICrossClubRecords } from '@/api/businessOpportunities/type';
  import { computed, type PropType } from 'vue';
  import { BoTypeEnum, ReviewStatus } from '@/enums/businessOpportunitiesEnum';
  import { navigateTo } from '@/router';

  const props = defineProps({
    data: {
      type: Object as PropType<ICrossClubRecords>,
      default: () => ({}),
    },
  });

  const reviewStatusText = computed(() => {
    return {
      [ReviewStatus.Approved]: {
        text: '已通过',
        bgColor: '#2878FF',
      },
      [ReviewStatus.Pending]: {
        text: '待审核',
        bgColor: '#E29942',
      },
      [ReviewStatus.Rejected]: {
        text: '已驳回',
        bgColor: '#EA5E0E',
      },
      [ReviewStatus.Expired]: {},
    }[props.data.reviewStatus];
  });

  const toSupplyDemandDetails = () => {
    navigateTo({
      name: 'supplyDemandDetails',
      options: {
        id: props.data.boInfoId!,
      },
    });
  };
</script>
<style lang="scss" scoped></style>
